<template>
  <div class="wrapper">
    <div class="tab">
      <div class="tab-item" :class="{ current: status === 'none' }" @click="handle('none')">全部</div>
      <div class="tab-item" :class="{ current: status === '1' }" @click="handle('1')">待付款</div>
      <div class="tab-item" :class="{ current: status === '2' }" @click="handle('2')">待发货</div>
      <div class="tab-item" :class="{ current: status === '6' }" @click="handle('6')">待收货</div>
    </div>
    <template v-if="list.length > 0">
      <router-link
        tag="div"
        :to="'/center/orderList/orderDetail/' + item.order_code"
        class="item"
        v-for="item of list"
        :key="item.order_code"
      >
        <div class="title">
          <p>有惊喜</p>
          <p v-if="item.payment_status == 1">待付款</p>
          <p v-if="item.payment_status == 2 && item.guageList[0].shipping_status == 2">待发货</p>
          <p v-if="item.shipping_status == 4">已完成</p>
          <p v-if="item.shipping_status == 5">退货中</p>
          <p v-if="item.shipping_status == 6">待收货</p>
        </div>
        <template v-for="(it, index) of item.guageList">
          <GoodsItem
            :key="index"
            :title="it.name"
            :img="it.url"
            :price="it.total || it.price"
            :count="Number(it.order_num)"
          ></GoodsItem>
        </template>

        <p class="price">合计￥{{ item.subtotal }}</p>
      </router-link>
    </template>
    <template v-else>
      <p style="text-align: center;color:#666">暂无数据</p>
    </template>
  </div>
</template>

<script>
import GoodsItem from "@/components/goodsItem/GoodsItem.vue";
import GetQueryString from "@/assets/js/getQueryString.js";
import { mapState } from "vuex";
export default {
  name: "OrderList",
  components: {
    GoodsItem,
  },
  mounted() {
    //this._getList();
  },
  data() {
    return {
      list: [],
      status:0,
    };
  },
  computed: {
    ...mapState(["openId", "userState"]),
    apiUrl() {
      if (this.status == "none") {
        return this.userState == 0 ? "/v1/merchant/user" : "/v1/platform/user";
      } else {
        return this.userState == 0
          ? "/v1/merchant/status"
          : "/v1/platform/status";
      }
    },
    orderState() {
      let obj = {};
      switch (this.status) {
        case "1":
          obj.payment_status = 1;
          break;
        case "2":
          obj.shipping_status = 2;
          obj.payment_status = 2;
          break;
        case "6":
          obj.shipping_status = 6;
          break;
        case "3":
          obj.payment_status = 3;
      }
      return obj;
    },
  },
  created() {
    if (localStorage.getItem("openId")) {
      this.handle(this.$store.state.userState)
    } else {
      this.$router.push('/')
    }
  },
  methods: {
    
    
    handle(s) {
      this.status = s;
      this.$nextTick(() => {
        this._getList();
      });
    },
    async _getList() {
      let {
        data: { code, data },
      } = await this.$axios({
        url: this.apiUrl,
        method: "GET",
        params: {
          openid: this.openId,
          ...this.orderState,
        },
      });
      console.log(this.apiUrl,code,data,this.$store.state.userState)

      if (code === 0) {
        this.list = data.subtotal.map((item, index) => {
          item.guageList = data.items[index];
          return item;
        });
      } else {
        this.list = [];
      }
    },
  },
};
</script>

<style lang="scss" scoped>
@import "@/assets/css/base.scss";
.wrapper {
  padding: 0.2rem 0 50px;
  font-size: 0.28rem;
  background: #eee;
  min-height: 100vh;
}
.tab {
  display: flex;
  padding: 0.2rem;
  margin-bottom: 0.2rem;
  background: #fff;
  font-size: 0.28rem;
  .tab-item {
    flex: 1;
    margin: 0 0.4rem;
    text-align: center;
    &.current {
      color: $colorRed;
    }
  }
}
.item {
  margin-bottom: 0.2rem;
  padding: 0.2rem;
  background: #fff;
  .title {
    display: flex;
    align-items: center;
    padding: 0.1rem;
    font-size: 0.24rem;
    p {
      flex: 1;
      &:nth-child(2) {
        text-align: right;
      }
    }
  }
  .price {
    font-size: 0.2rem;
    text-align: right;
  }
}
</style>
